<template>

  <div class="pagination">
    <el-button :disabled="currentPage == 1" @click="selPage(1)" class="btn-prev1">
      首页
    </el-button>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[1, 2, 3, 4]" :page-size="pageSize" layout="slot, prev, pager, next" :total="total" background
      prev-text="上一页" next-text="下一页">

    </el-pagination>
    <el-button :disabled="currentPage == pageCount" @click="selPage(pageCount)" class="btn-next1">
      末页
    </el-button>
  </div>

</template>
<script>


export default {
  name: "productList",
  components: {

  },
  props: ["currentPage", 'pageSize', 'total'],
  data() {
    return {

    };
  },
  computed: {
    pageCount() {
      let count = 0
      if (this.total) {
        count = Math.ceil(this.total / this.pageSize)
      }
      return count;
    },
  },
  watch: {},

  created() {

  },

  methods: {
    handleSizeChange(curSize) {
      this.$emit('size-change', curSize)
    },
    handleCurrentChange(currentPage) {
      this.$emit('current-change', currentPage)
    },
    selPage(page) {
      this.$emit('current-change', page)
    }
  },
};
</script>
<style scoped lang="less">
.pagination {
  max-width: @width;
  margin: 21px 20px 0px 20px;
  padding-bottom: 41px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;

  /deep/ .el-pagination .btn-next {
    padding-left: 13px !important;
    padding-right: 13px !important;
    background-color: #fff !important;
    font-family: PingFang-SC-Medium, PingFang-SC-Medium;
    font-weight: normal;
    font-size: 14px;
    color: #7A7A7A;
    font-style: normal;
  }

  /deep/ .el-pagination .btn-prev {
    padding-left: 13px !important;
    padding-right: 13px !important;
    background-color: #fff !important;
    font-family: PingFang-SC-Medium, PingFang-SC-Medium;
    font-weight: normal;
    font-size: 14px;
    color: #7A7A7A;
    font-style: normal;
  }

  /deep/ .el-pager li {
    background-color: #fff !important;
    border-radius: 4px 4px 4px 4px;
    font-family: PingFang-SC-Medium, PingFang-SC-Medium;
    font-weight: normal;
    font-size: 14px;
    color: #7A7A7A;
    font-style: normal;
  }

  /deep/ .el-pager li.active {
    background: #EF1F1F !important;
  }

  .btn-prev1,
  .btn-next1 {

    padding: 8px 13px !important;

    background-color: #fff !important;
    font-family: PingFang-SC-Medium, PingFang-SC-Medium;
    font-weight: normal;
    font-size: 14px;
    color: #7A7A7A;
    font-style: normal;
    border: 0px !important;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #EF1F1F !important;
    color: #fff !important;
   }
}
</style>
